<template>
  <div id="app" class="main">
    <div v-loading="loading">
      <v-form-designer
        ref="vfDesigner"
        :banned-widgets="displayBanned"
        :designer-config="designerConfig"
        :field-list-api="fieldListApi"
      >
        <!-- 自定义按钮插槽演示 -->
        <template #customToolButtons>
          <el-button
            :disabled="btnDis"
            type="text"
            @click="saveFormJson"
          ><i class="el-icon-check" />保存</el-button>
          <el-button
            type="text"
            style="color: red"
            @click="closeForm"
          ><i class="el-icon-close" />关闭</el-button>
        </template>
      </v-form-designer>
      <div />
    </div>
  </div>

</template>

<script>
import { saveDesignFormData, getDesignFormData } from '@/api/system/desform/data/designFormData'
import { getToken } from '@/utils/auth'

export default {
  name: 'App',
  data() {
    return {

        // 遮罩层
        loading: false,
        form: {},
        btnDis: false,
        headId: this.$route.query.headId,
        // 配置不显示的组件
        displayBanned: [],
        // 配置不显示的按钮
        designerConfig: {
                languageMenu: true,
                exportCodeButton: false,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: true,
                previewFormButton: true,
                importJsonButton: false,
                exportJsonButton: false,
                generateSFCButton: false,
                toolbarMinWidth: 100,
                presetCssCode: '',
                toolbarMaxWidth: 220
                // 设置自定义产品名称（仅Pro）
                // productName: '',
                // 设置自定义产品标题（仅Pro）
                // productTitle: '表单设计器',
                // 是否显示顶部LOGO条（仅Pro）
                // logoHeader: false
      },
        // 配置获取后端接口对象P
        fieldListApi: {
        URL: '/dev-api/data/designFormData/configObj/' + this.$route.query.headId,
        labelKey: 'labelKey',
        nameKey: 'nameKey',
        headers: {
          Authorization: getToken()
       }
    }

    }
  },
  created() {},
  mounted() {
       this.init(this.$route.query.id)
  },
  methods: {
    init(id) {
        this.loading = true
        if (id != null && id !== '') {
             getDesignFormData(id).then(response => {
               this.form = response.data
                // 1.清空设计器画布
               this.$refs.vfDesigner.clearDesigner()
               this.headId = response.data.onlineFormDataId
                // 2.加载当前设计id的画布
               this.$refs.vfDesigner.setFormJson(this.form.desformDataJson)
               this.loading = false
       })
    } else {
          //  this.reset()
          // 1.清空设计器画布
          this.$refs.vfDesigner.clearDesigner()
          this.loading = false
  }
    },
    saveFormJson() {
      this.btnDis = true
      const formJson = this.$refs.vfDesigner.getFormJson()
      // 转换为json
      this.form.desformDataJson = JSON.stringify(formJson)
      saveDesignFormData(this.form).then(response => {
            if (response.code === 200) {
                this.msgSuccess(this.$t('保存成功'))
           } else {
              this.msgError(response.msg)
            }
            setTimeout(() => {
               this.btnDis = false
            }, 3000)
       })
    },
    closeForm() {
       this.$confirm('此操作不会保存数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
             window.close()
        }).catch(() => {
        })
    }
  }
}
</script>

<style lang="scss" scoped>
// #app {
//   height: 100%;
// }
body {
  margin: 0px;
}
.main{
   position: relative !important;;
   top: -50px !important;
}
</style>
